<script>
    import { ElMessage } from 'element-plus'
    export default {
        name:'login',
        data(){
            return {
                form:{
                    username:this.$route.query.username || '',
                    password:''
                },
                rules:{
                    username:[
                        {required:true,message:'请输入用户名',trigger: 'blur'}
                    ],
                    password:[
                        {required:true,message:'请输入密码',trigger:'blur'}
                    ]
                }
                
            }
        },
        created(){
        console.log('$route=',this.$route) 
        },
        methods:{
            onSubmit(){
                //校验表单
                this.$refs.myform.validate(async valid=>{
                    if (!valid) return
                    
                    const data = await this.$store.dispatch('login',this.form)
                    if(data.code === 200){
                        ElMessage.success('登陆成功！')
                        const {targetUrl = '/manage'} = this.$route.query
                        this.$router.replace(targetUrl)
                    }else{
                        ElMessage.error('用户名或密码错误')
                    }
                    
                })
            }
        }
    }
</script>

<template>
    <div class="login-page">
        <h3>银豹后台管理系统</h3>
        <el-form :model="form" :rules="rules" label-width="120px" ref="myform">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" input-style="width:380px"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password" input-style="width:380px"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">登陆</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped >
    .login-page{
        width:600px;
        height: 300px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        border: 1px solid #ccc;
    }
    .login-page h3{
        margin: 60px 0 30px;
        text-align: center;
    }
    
</style>